<template>
    <div id="home">
        <div class="header">
            <mt-header fiexd title="首页"></mt-header>
        </div>
       <div class="content">
            <mt-swipe>
            <mt-swipe-item>
                <img src="../lib/img/swipe/item1.jpg" alt="">
            </mt-swipe-item>
          <mt-swipe-item>
              <img src="../lib/img/swipe/item2.jpg" alt="">
          </mt-swipe-item>
        </mt-swipe>

        <div class="grids">
            <div class="view" v-for="(val, index) in gridList" :key="index" @click="handle(index)">
                <img :src="val.imgLink" alt="">
                <span>{{val.title}}</span>
            </div>
        </div>
       </div>
    </div>
</template>
<script>

import axios from 'axios'
import { Toast} from 'mint-ui'
import { mapMutations} from 'vuex'

export default {
    data(){
        return {
            gridList:[
                {title: '商城',imgLink: require('../lib/img/icons/grid-01.png')},
                {title: '音乐',imgLink: require('../lib/img/icons/grid-02.png')},
                {title: "电影",imgLink: require('../lib/img/icons/grid-03.png')},
                {title: '书本',imgLink: require('../lib/img/icons/grid-04.png')},
                {title: '美食',imgLink: require('../lib/img/icons/grid-05.png')},
                {title: '学校',imgLink: require('../lib/img/icons/grid-06.png')}
            ]
        }
    },
    methods:{
        ...mapMutations([
            'setState', 'toastInfo'
        ]),
        handle(index){
            if(index === 0){
                this.setState({homePage: 'shop'})
            }else if(index ===1){
                 this.setState({homePage: 'music'})
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .mint-swipe{
        height: 150px;
        img{
            width: 100%;
            height: 100%;
        }
    }

    // 九宫格
    .grids{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        > div{
            display: flex;
            width: 33.333%;
            flex-direction: column;
            align-items: center;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            > img{
                width: 35%;
                margin: 10px 0;
            }
            >span{
                font-size: 16px;
                color: #ccc;
                padding: 5px 0;
            }
        }
    }
</style>
